<template>
	<view>
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="out" v-for="(n,index) in avatars">
			<view class="image" v-if="num!=1&&JSON.parse(n.avatarurl).length==3"
				v-for="(item,num) in JSON.parse(n.avatarurl)">
				<image mode="scaleToFill" lazy-load="true" class="imageitem" @click="clickimage(item)" :src="item"></image>
			</view>
			<view class="image" v-if="JSON.parse(n.avatarurl).length==2" v-for="(item,num) in JSON.parse(n.avatarurl)">
				<image mode="scaleToFill" lazy-load="true" class="imageitem" @click="clickimage(item)" :src="item"></image>
			</view>
			<view class="image" v-if="JSON.parse(n.avatarurl).length==4" v-for="(item,num) in JSON.parse(n.avatarurl)">
				<image mode="scaleToFill" lazy-load="true" class="imageitem" @click="clickimage(item)" :src="item"></image>
			</view>
			<view v-if="JSON.parse(n.avatarurl).length==6" v-for="(item,num) in JSON.parse(n.avatarurl)">
				<image mode="scaleToFill" lazy-load="true"  class="imageitem" style="width: 49vw;" @click="clickimage(item)" :src="item"></image>
			</view>
		</view>
		<view class="onedisplay" >
			<view class="oneimage" v-if="JSON.parse(n.avatarurl).length==1" v-for="(n,index) in avatars">
				<image mode="scaleToFill" lazy-load="true" @click="clickimage(JSON.parse(n.avatarurl))" class="imageitem" :src="JSON.parse(n.avatarurl)[0]"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatars: [],
				list: [{
					name: '情侣',
					key: 'couple'
				}, {
					name: '男头',
					key: 'boy'
				}, {
					name: '女头',
					key: 'girl'
				}, {
					name: '动漫',
					key: 'cartoon'
				}],
				current: 0
			}
		},
		methods: {
			change(index) {
				this.current = index;
				this.loadimages(this.list[this.current].key)
			},
			clickimage: function(url) {
				console.log(typeof(url))
				if(typeof(url)=='string'){
					url=[url]
				}
				uni.previewImage({
					current: 0,
					urls: url,

				})
			},
			loadimages: function(category) {
				var that = this
				uni.showLoading({title: '加载中',mask:true});
				uni.request({
					url: that.$springboot+'admin/queryAvator',
					data: {
						'category': category
					},
					success(res) {
						console.log("请求完毕")
						setTimeout(function () {uni.hideLoading();}, 0)
						that.avatars = res.data

					}
				})
			}
		},
		onLoad() {
			var that = this
			that.loadimages('couple')
		}
	}
</script>

<style>
	.out {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-evenly;
	}

	.image {
		display: inline-flex;
		width: 49%;
		zoom: 0.8;
		flex-direction: row;
		flex-wrap: nowrap;
		border-radius: 10px;
		overflow: hidden;
	}
	.onedisplay {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}
	
	.oneimage {
		width: 49%;
		zoom: 0.8;
		border-radius: 10px;
		overflow: hidden;
	}

</style>
